<template>
  <el-form inline class="custom-inline-form">
    <!-- 下拉框表单项 -->
    <el-form-item class="form-item" id="form-item-selector">
      <selector v-model="params.difficulty" placeholder="请选择题目的难度" size="large" class="custom-select"></selector>
    </el-form-item>

    <!-- 输入框表单项 -->
    <el-form-item class="form-item">
      <el-input v-model="params.title" placeholder="请输入要搜索的题目标题" class="custom-input" />
    </el-form-item>

    <!-- 按钮组表单项 -->
    <el-form-item class="form-item btn-group">
      <div class="btn-wrapper">
        <el-button plain @click="onSearch">搜索</el-button>
        <el-button plain type="info" @click="onReset">重置</el-button>
        <el-button plain type="primary" :icon="Plus" @click="onAddQuestion">添加题目</el-button>
      </div>
    </el-form-item>
  </el-form>

  <!-- 表格部分 - 添加height属性实现垂直滚动 -->
  <el-table :data="questionList" v-loading="loading" height="500px" border stripe style="width: 100%; margin-bottom: 20px">
    <el-table-column prop="questionId" width="150px" label="题目id" />
    <el-table-column prop="title" label="题目标题" min-width="200" />
    <el-table-column prop="difficulty" label="题目难度" width="90px">
      <template #default="{ row }">
        <div v-if="row.difficulty === 1" style="color: #67c23a" class="difficulty">简单</div>
        <div v-if="row.difficulty === 2" style="color: #e9b260" class="difficulty">中等</div>
        <div v-if="row.difficulty === 3" style="color: #fd4c40" class="difficulty">困难</div>
      </template>
    </el-table-column>
    <el-table-column prop="createName" label="创建人" width="140px" />
    <el-table-column prop="createTime" label="创建时间" width="180px" />
    <el-table-column label="操作" width="140px" fixed="right">
      <template #default="{ row }">
        <el-button type="text" @click="onEdit(row.questionId)" style="color: #409eff">编辑</el-button>
        <el-popconfirm placement="top" @confirm="handleConfirm(row.questionId)" :icon="InfoFilled" icon-color="#626AEF" title="确认删除该题目">
          <template #reference>
            <el-button type="text">删除</el-button>
          </template>
          <template #actions="{ confirm, cancel }">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button type="danger" size="small" @click="confirm">确认</el-button>
          </template>
        </el-popconfirm>
        <!-- //<el-button type="text" @click="onDelete(row.questionId)" style="color: #f10c32" class="red"></el-button> -->
      </template>
    </el-table-column>
  </el-table>

  <!-- 在表格下方添加固定容器 -->
  <div class="pagination-container">
    <el-pagination
      size="small"
      layout="total, sizes, prev, pager, next, jumper"
      :total="params.total"
      v-model:current-page="params.pageNum"
      v-model:page-size="params.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <question-drawer ref="questionEditRef" @success="onSuccess"></question-drawer>
</template>

<script setup>
import { Plus } from "@element-plus/icons-vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { getQuestionListService, deleteQuestionService } from "@/apis/question";
import selector from "@/components/QuestionSelector.vue";
import questionDrawer from "@/components/QuestionDrawer.vue";
import router from "@/router";

const loading = ref(true);
const params = ref({
  pageNum: 1,
  pageSize: 10,
  difficulty: "",
  title: "",
  total: 0,
});
const questionList = ref([]);
const questionEditRef = ref();

// 动态高度计算
const tableHeight = ref("500px");

// 响应窗口大小变化
const updateTableHeight = () => {
  const windowHeight = window.innerHeight;
  // 根据窗口高度计算表格高度（减去页眉、搜索栏和分页组件的高度）
  tableHeight.value = `${windowHeight - 240}px`;
};

// 组件挂载时计算高度
onMounted(() => {
  updateTableHeight();
  window.addEventListener("resize", updateTableHeight);
});

// 组件卸载前移除监听器
onBeforeUnmount(() => {
  window.removeEventListener("resize", updateTableHeight);
});

function handleConfirm(questionId) {
  // 通过外部作用域（如 row）直接获取 questionId
  console.log("删除题目ID:", questionId);
  deleteQuestionService(questionId);
  router.go(0);
}
function onAddQuestion() {
  questionEditRef.value.open();
}
function onEdit(questionId) {
  questionEditRef.value.open(questionId);
}
function onSuccess(service) {
  if (service === "add") {
    params.value.pageNum = 1;
  }
  loadQuestions();
}

function onSearch() {
  params.value.pageNum = 1;
  loadQuestions();
}

function onReset() {
  params.value.title = "";
  params.value.difficulty = "";
  params.value.pageNum = 1;
  loadQuestions();
}

const handleSizeChange = (newPageSize) => {
  params.value.pageSize = newPageSize;
  params.value.pageNum = 1;
  loadQuestions();
};

const handleCurrentChange = (newPageNum) => {
  params.value.pageNum = newPageNum;
  loadQuestions();
};

const loadQuestions = async () => {
  try {
    loading.value = true;
    const data = await getQuestionListService(params.value);
    questionList.value = data.rows;
    params.value.total = data.total;
    loading.value = false;
  } catch (e) {
    console.error("加载失败:", e);
    loading.value = false;
    ElMessage.error("题目加载失败，请稍后再试");
  }
};

loadQuestions();
</script>

<style scoped>
.difficulty {
  font-weight: bold;
}
/* 原有的样式保持不变 */
#form-item-selector {
  width: 175px;
}
.custom-inline-form {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 20px;
}

.custom-inline-form .form-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 16px;
  height: 40px;
}

.custom-inline-form .form-item:last-child {
  margin-right: 0;
}

.custom-select {
  width: 100%;
  height: 40px;
}

.custom-select :deep(.el-select__placeholder) {
  color: #c0c4cc;
  font-size: 14px;
}

.custom-select :deep(.el-select__input) {
  height: 28px;
  line-height: 28px;
  margin-top: 6px;
}

.custom-input {
  width: 100%;
  height: 40px;
}

.custom-input :deep(.el-input__inner) {
  height: 40px;
  line-height: 40px;
}

.btn-group .btn-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.btn-group .el-button {
  height: 36px;
  padding: 0 15px;
  min-width: 80px;
}

/* 新增表格样式 */
.el-table {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 解决滚动时表头固定的视觉效果 */
.el-table :deep(.el-table__header-wrapper) {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.custom-popconfirm {
  background: #ffffff;
  color: red;
  border: none !important; /* 移除外边框 */
  box-shadow: none !important; /* 可选：移除阴影 */
  padding: 0 !important; /* 移除内边距 */
}

/* 移除内部元素的边框 */
.custom-popconfirm .el-popconfirm__main,
.custom-popconfirm .el-popconfirm__action {
  border: none !important;
}

/* 移除按钮边框（若需要） */
.custom-popconfirm .el-button {
  border: none !important;
}
</style>
